<!-- BMS控制 -->
<template>

  <div class="locationIndexPage">
    <div class="menu-container warp">
      <div class="titles">
        轨迹回放
      </div>
      <div class="containerCode">
        设备编码： {{ deviceCode }}
        <el-date-picker style="width: 350px; margin-top: 10px;" v-model="pickerValue" size="small" type="datetimerange"
          range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" @change="handleQueryBtn"
          value-format="x" />
        <div class="trajectory-btn">

          <el-button type="success" plain @click="trajectoryMoveAnimation" v-if="locusPlay == 2">{{ locusPlay2 == 2 ?
            '重新播放' : '轨迹回放' }} </el-button>
          <el-button type="warning" plain @click="pauseAnimation" v-if="locusPlay == 1">轨迹暂停</el-button>
          <el-button type="success" @click="resumeAnimation" v-if="locusPlay2 == 2">继续播放</el-button>
        </div>
      </div>
    </div>
    <div class="map-container">
      <div id="trajectoryMap" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "trajectory",
  inheritAttrs: false,
});
import { useRoute } from 'vue-router'
import { initMap } from "@/common/map";
import LocationApi, { trajectoryReq, trajectoryData } from '@/api/location'

let locusPlay = ref(2)
let locusPlay2 = ref(1)

const route = useRoute()
let deviceCode = ref('');
let deviceID = ref('');
if (route.query.deviceSN) {
  deviceCode.value = route.query.deviceSN as string
  deviceID.value = route.query.id as string
}
let _AMap: any = null;
let _map: any = null;
let infoWindow: any = null;
let marker: any = null
/**
@date: 2024-09-20 11:18:55
轨迹路线
*/
let lineArr: any = []
let outerVisible = ref(false)
const loading = ref(false);
let queryParams = reactive<trajectoryReq>({
  "deviceId": '1839282463873126401',
  "startTime": new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0, 0).getTime(),
  "endTime": new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 23, 59, 59).getTime(),
});
let trajectoryList = reactive<Array<trajectoryData>>([]);
let pickerValue = ref<[number, number]>([
  new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0, 0).getTime(),
  new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 23, 59, 59).getTime(),
])

/** 初始化图表1  */
async function setMap() {
  const { AMap, map } = await initMap("trajectoryMap");
  _AMap = AMap;
  _map = map;
  queryParams.deviceId = deviceID.value
  handleQuery()

}
function handleQueryBtn(e: Array<number>) {
  queryParams.startTime = e[0]
  queryParams.endTime = e[1]
  handleQuery()
}
/** 查询 */
function handleQuery() {
  loading.value = true;

  LocationApi.trajectory(queryParams)
    .then((data) => {
      console.log(data.length, '轨迹');
      if (data.length === 0) {
        ElMessage.warning('该时间段设备暂无轨迹');
        return
      }
      trajectoryList = data
      lineArr = []
      data.forEach(item => {
        lineArr.push([item.lng, item.lat])
      })
      marker = new _AMap.Marker({
        map: _map,
        position: [trajectoryList[0].lng, trajectoryList[0].lat],
        icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
        offset: new _AMap.Pixel(-13, -26),
      });
      // 绘制轨迹
      new _AMap.Polyline({
        map: _map,
        path: lineArr,
        showDir: true,
        strokeColor: "#28F",  //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6,      //线宽
        // strokeStyle: "solid"  //线样式
      });

      new _AMap.Polyline({
        map: _map,
        strokeColor: "#AF5",  //线颜色
        strokeWeight: 6,      //线宽
      });
      _map.setZoomAndCenter(16, [trajectoryList[0].lng, trajectoryList[0].lat], false, 1000);
    })
    .finally(() => {
      loading.value = false;
    });
}
function trajectoryMoveAnimation() {
  locusPlay.value = 1
  locusPlay2.value = 1
  _AMap.plugin('AMap.MoveAnimation', function () {
    marker.moveAlong(lineArr, {
      // 每一段的时长
      duration: 500,//可根据实际采集时间间隔设置
      // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
      autoRotation: true,
    });
  });
}
function pauseAnimation() {
  locusPlay.value = 2
  locusPlay2.value = 2
  marker.pauseMove();
}
function resumeAnimation() {
  locusPlay.value = 1
  locusPlay2.value = 1
  marker.resumeMove();
};
onMounted(() => {
  setMap();
  console.log(deviceCode.value, 'deviceCode');
});

</script>
<style lang="scss" scoped>
#trajectoryMap :deep(.amap-info-outer) {
  color: #000000;
}

.dialogDetails {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .list {
    display: flex;
    width: 50%;

    div {
      color: #000000;
      font-size: 16px;

      &:nth-child(1) {
        width: 30%;
      }
    }
  }
}

.locationIndexPage {
  display: flex;
  height: calc(100vh - 120px);
  box-sizing: border-box;
  padding: 10px 10px 10px 0;
  overflow: hidden;

  .menu-container {
    width: 370px;
    min-height: 480px;
    position: relative;
    display: flex;
    flex-direction: column;

    .containerCode {
      padding: 10px 10px 0 10px;

    }

    .titles {
      padding: 0px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      border-bottom: 1px solid #4d4d4d;
      color: #fff;
    }

    .trajectory-btn {
      margin-top: 10px
    }
  }

  .map-container {
    flex: 1;
    width: calc(100% - 20px);
    min-height: 480px;
    min-width: 400px;
    position: relative;
    background: #000000;
    height: 100%;
    padding-left: 10px;
  }
}

// 复用样式
.warp {
  color: #fff;
  background: #2b2b2b;

  border-radius: 5px;
}
</style>
<style lang="scss">
.sortingLocation {
  .el-dropdown-menu.el-dropdown-menu--default {
    background-color: #fff !important;

  }
}

.dialogTableVisibleclass {
  background-color: #f1f1f1;

  .el-dialog__title {
    color: #000;
  }
}

.el-popper__arrow:before {
  background: #fff !important;
  border: 1px solid #fff !important;
}

// /* 定制滚动条整体 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: #9d9d9d;
}

/* 定制滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  /* 轨道颜色 */
}

/* 定制滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #9d9d9d;
  /* 滑块颜色 */
  border-radius: 6px;
  /* 圆角 */
}

/* 滑块在鼠标悬停时改变颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #747373;
}




.map-container {
  #trajectoryMap {

    .content-window-card {
      position: relative;
      box-shadow: none;
      bottom: 0;
      left: 0;
      width: auto;
      padding: 0;
    }

    .content-window-card p {
      height: 2rem;
    }

    .custom-info {
      border: solid 1px silver;
    }

    div.info-top {
      position: relative;
      background: none repeat scroll 0 0 #F9F9F9;
      border-bottom: 1px solid #CCC;
      border-radius: 5px 5px 0 0;
    }

    div.info-top div {
      display: inline-block;
      color: #333333;
      font-size: 14px;
      font-weight: bold;
      line-height: 31px;
      padding: 0 10px;
    }

    div.info-top img {
      cursor: pointer;
      position: absolute;
      top: 10px;
      right: 10px;
      transition-duration: 0.25s;
    }

    div.info-top img:hover {
      box-shadow: 0px 0px 5px #000;
    }

    div.info-middle {
      padding: 0 10px 10px;

      span {
        font-size: 14px;
        line-height: 32px;
        color: #000;
      }
    }

    div.info-bottom {
      height: 0px;
      width: 100%;
      clear: both;
      text-align: center;
    }

    div.info-bottom img {
      position: relative;
      z-index: 104;
    }

    span {
      margin-left: 5px;
      font-size: 11px;
    }

    .info-middle img {
      float: left;
      margin-right: 6px;
    }

    .popBtns {
      display: flex;

      .btn {
        padding: 1px 3px;
        margin: 5px 5px 0 0;
        border: 1px solid #2ec7c9;
        border-radius: 5px;
        flex-shrink: 0;
        color: #2ec7c9;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
}
</style>
